<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>分页信息</title>
		<link rel="stylesheet" href="__TMPL__Public/css/kind.css?v2" />
		<link rel="stylesheet" href="__TMPL__Public/css/main.css?v2" />
		<link href="__TMPL__Public/model/swiper/swiper-3.4.0.min.css" rel="stylesheet" />
		<style type="text/css">
			.swiper-wrapper img{width:100%;height:auto;max-height:100%;}
		</style>
	</head>
	<body>
	  <a href="/HGrid/gridkindlist"><img style="width: 100%;height: 100px;" src="__TMPL__Public/img/kind/pic2.jpg" alt="" /></a>
	  <a href="/HGrid/kindorder"><img style="width: 100%;height: 50px;" src="__TMPL__Public/img/kind/pic1.jpg" alt="" /></a>
	  <ul class="friend">
	    <volist name="res" id="r">
	  	<li>
	  	  <div class="left-cell">
	  	    <img class="lazy" data-original="{$r.icon}"/>
	  	  </div>
	  	  <div class="right-cell">
	  	    <div class="title">{$r.nick}</div>
	  	    <div class="content">
            <a href="/HGrid/kindmerchant/id/{$r.id}">
	  	      <div>{$r.content|mb_substr=0,114,'utf-8'}...</div>
	  	    	</a>
	  	    	<div class="imglib" >
	  	    	  <foreach name="r.img" item="v">
	  	    	     <img onclick="imglibclick(this)" class="lazy" data-original="{$v}"/>
	  	    	  </foreach>
	  	    	</div>
            <div class="date">
              {$r.create_time}
            </div>
	  	    </div>
        </div>
	  	</li>
	  	</volist>
	  </ul>
	  <div class="swiper-shadow"> 
      <div class="swiper-container">
        <div class="swiper-wrapper">
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
	  <!--<div class="showpos-box">
      <div class="gridlist">
        <volist name="res" id="r">
          <a href="/HGrid/kindmerchant/id/{$r.id}" class="grid-item">
            <img class="left" src="{$r.icon}"/>
            <div class="right cell">
              <div class="cell-right">
                <p class="text-price"><span style="font-size: 10px;">&yen;</span>{$r.price}<span style="font-size: 10px;">元</span></p>
                <p class="text-small">{$r.create_time}</p>
              </div>
              <div class="cell-left">
                <p>{$r.title}</p>
                <p class="text-small">{$r.name} {$r.pvalue}</p>
              </div>
            </div>
          </a>
        </volist>
      </div>
    </div>-->
	  <!--<div class="kind-contanier">
	    <div class="kind-line">
  	    <a href="/HGrid/gridkindlist"><img src="__TMPL__Public/img/kind/jewellery.png" alt="" /><span>珠宝</span></a>
  	    <a href="/HGrid/gridkindlist"><img src="__TMPL__Public/img/kind/shopping.png" alt="" /><span>购物</span></a>
  	    <a href="/HGrid/gridkindlist"><img src="__TMPL__Public/img/kind/cake.png" alt="" /><span>蛋糕</span></a>
  	    <a href="/HGrid/gridkindlist"><img src="__TMPL__Public/img/kind/food.png" alt="" /><span>美食</span></a>
	    </div>
	    <div class="kind-line">
  	    <a href="/HGrid/gridkindlist"><img src="__TMPL__Public/img/kind/bag.png" alt="" /><span>工作</span></a>
  	    <a href="/HGrid/gridkindlist"><img src="__TMPL__Public/img/kind/electronics.png" alt="" /><span>电子产品</span></a>
  	    <a href="/HGrid/gridkindlist"><img src="__TMPL__Public/img/kind/user.png" alt="" /><span>招聘</span></a>
  	    <a href="/HGrid/gridkindlist"><img src="__TMPL__Public/img/kind/map.png" alt="" /><span>本地服务</span></a>
	    </div>
	  </div>-->
	  <!--<a href="kindorder"><img style="display: block;" width="100%" src="__TMPL__Public/img/kind/banner-fabu.jpg"/></a>-->
	  <!--<volist name="list" id="l">
      <div class="line-title">{$l.name}</div>
      <ul class="kinds4">
        <foreach name="l.data" item="vo" >
            <a href="/HGrid/gridkindlist" class="kind-item">{$vo.pvalue}</a>
        </foreach>
      </ul>
	  </volist>-->
	</body>
	<script src="__PUBLIC__/js/jquery-1.9.1.js"></script>
	<script src="__TMPL__Public/js/main.js?{$version}" ></script>
	<script src="__TMPL__Public/js/jquery.lazyload.min.js"></script>
	<script src="__TMPL__Public/model/swiper/swiper-3.4.0.min.js" ></script>
	<script type="text/javascript">
	$(function() {
        $("img.lazy").lazyload({effect: "fadeIn"});
    });
	var page = 2;
	toast.init();
    var mySwiper= new Swiper('.swiper-container', {
        pagination : '.swiper-pagination',
        lazyLoading : true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,
    });
    var boxwidth = $(".swiper-shadow").width();
    var imgheight = 40;
    $(".imglib img").each(function(){
      var t= $(this);
      t.height(t.width());
      imgheight = t.height();
    })
    function imglibclick(obj){
      var t = $(obj);
      var pre= t.prevAll();
      var index = pre?pre.length:0;
      var imgs = t.parent().children("img");
      var wrapper = $(".swiper-wrapper");
      var html="";
      wrapper.empty();
      imgs.each(function(){
        html+='<img class="swiper-slide" src="'+$(this).attr("src")+'"/>';
      })
      wrapper.html(html);
      mySwiper.slideTo(index,100,false);
      $(".swiper-shadow").show();
    }
    $(".swiper-shadow").on("click",function(){
      var t =$(this);
       t.hide(); 
    });
    $(window).scroll(function () {
    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
      $.ajax({
      	type:"get",
      	url:"/HGrid/moregridkind/page/"+page+"/height/"+imgheight,
      	async:false,
      	success:function(res){
      	  if(res.status==1){
      	    if(res.info&&res.info.length>0){
          	  $(".friend").append(res.info);
          	  $("img.lazypage"+page).lazyload({effect: "fadeIn"});
          	  page++;
      	    }else{
      	      toast.show("没有更多了");
      	    }
      	  }
      	},error:function(){
      	  
      	}
      });
    }
  });
  </script>
</html>
